<template>
  <div class="travelsPerfect-wrapper">
    <v-header ref="header" title="游记信息完善">
      <p slot="right" @click="submit">完成</p>
    </v-header>
    <div class="travelsPerfect" :style="{height: mainHeight + 'px'}">
      <p class="item title">完善出行信息，让游记内容更丰富</p>

      <div class="item require" @click="showSelectAddress = true">
        <p>目的地</p>
        <p class="selected" v-if="publishAddress !== null">{{publishAddress.name}}</p>
        <p class="unselected" v-else>选择出行目的地</p>
      </div>
      <group>
        <datetime v-model="travelTime" title="出行时间" placeholder="选择出发日期" clear-text="今天" @on-clear="setToday"></datetime>
      </group>
      <group>
        <x-input title="出行天数/天" v-model="numberOfDays" type="number" :max="6" placeholder="输入天数" :show-clear="false"></x-input>
      </group>
      <div class="item" @click="showFigure = true">
        <p>人物</p>
        <p class="selected" v-if="figure !== ''">{{figure}}</p>
        <p class="unselected" v-else>选择出行人物</p>
      </div>
      <group>
        <x-input title="人均花费/RMB" v-model="thePerCapitaCost" type="number" :max="6" placeholder="输入金额" :show-clear="false"></x-input>
      </group>

      <actionsheet v-model="showFigure" :menus="figureActionsheet" show-cancel @on-click-menu="selectFigure"></actionsheet>

      <!-- 选择目的地 -->
      <address-selector v-model="showSelectAddress" @selectArea="selectArea" :showClear="false" :current="(publishAddress && publishAddress.id) || ''"></address-selector>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { Group, Datetime, Actionsheet, XInput, Popup, TransferDom } from 'vux'
import AddressSelector from '@/components/address-selector/address-selector'

import { isIphoneX } from '@/assets/js/brower'
import axios from '@/api/axiosApi'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  mixins: [handleBackMixin],
  data  () {
    return {
      showSelectAddress: false,
      showFigure: false,
      publishAddress: null,
      travelTime: '',
      numberOfDays: '',
      figureActionsheet: {
        figure1: '一个人',
        figure2: '情侣/夫妻',
        figure3: '带孩子',
        figure4: '家庭出游',
        figure5: '和朋友',
        figure6: '和同学',
        figure7: '其他'
      },
      figure: '',
      thePerCapitaCost: '',
      allPopupModels: ['showSelectAddress', 'showFigure']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader, Group, Datetime, Actionsheet, XInput, Popup, AddressSelector
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
    this.mainHeight = 0
  },
  mounted () {
    this.mainHeight = window.innerHeight - this.$refs.header.clientHeight
  },
  methods: {
    _getAddressList () {
      axios.get(this, `/v1/address/1`, {
        pageSize: 50
      }, (addressList) => {
        this.addressList = addressList
      }, null, false)
    },
    selectArea (area) {
      this.publishAddress = area
      this.showSelectAddress = false
    },
    setToday() {
      this.travelTime = this.moment().format('YYYY-MM-DD')
    },
    selectFigure(key, item) {
      this.figure = item
    },
    submit() {
      if (this.publishAddress === null) {
        this.$vux.toast.text('请选择出行目的地', 'middle')
        return
      }
      axios.put(this, '/v1/playStrategy/' + this.$route.params.id, {
        publishAddressId: this.publishAddress.id,
        travelTime: this.travelTime,
        figure: this.figure,
        numberOfDays: this.numberOfDays,
        thePerCapitaCost: this.thePerCapitaCost
      }, () => {
        this.$vux.toast.text('发布游记成功~', 'middle')
        this.$router.go(-2)
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.travelsPerfect-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 101;
  .travelsPerfect {
    padding: 12px 15px;
  }
  .item {
    padding: 12px 3px;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .selected {
      color: #999;
    }
    .unselected {
      color: $color-theme
    }
  }
  .require {
    position: relative;
    &:before {
      content: '*'
      display: block;
      width: 6px;
      height: 6px;
      top: 12px;
      left: -2px;
      color: red;
      position: absolute;
    }
  }
  .title {
    background: #fff;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    font-size: $font-size-desc;
    position: relative;
    &:before {
      display: block;
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 12px;
      width: 5px;
      border-radius: 2.5px;
      background: $color-theme;
    }
  }
}
</style>
<style>
.travelsPerfect-wrapper .weui-cells {
  margin-top: 0;
}
.travelsPerfect-wrapper .weui-cells::after {
  display: none;
}
.travelsPerfect-wrapper .weui-cell {
  padding: 12px 3px;
}
.travelsPerfect-wrapper .vux-no-group-title {
  margin-top: 0;
  border-bottom: 1px solid #f4f4f4;
}
.travelsPerfect-wrapper .vux-no-group-title::before {
  display: none;
}
.travelsPerfect-wrapper .vux-cell-placeholder {
  color: #00ceb9
}
.travelsPerfect-wrapper .weui-cell_access .weui-cell__ft:after {
  display: none;
}
.travelsPerfect-wrapper .weui-cell_access .weui-cell__ft {
  padding-right: 0;
}
.travelsPerfect-wrapper .weui-input {
  text-align: right;
}
.travelsPerfect-wrapper .vux-x-input input::-webkit-input-placeholder {
  color: #00ceb9!important;
}
</style>

